<template>
  <div>
    <div class="topBtn">
      <div class="sizeBig"><span>排程</span></div>
      <div>
        <el-button type="primary" style="height:36px;">
          <i class="icon-close" />禁用
        </el-button>
        <el-button type="primary" style="height:36px;">
          <i class="icon-qiy" />启用
        </el-button>
        <el-button type="primary">
          <i class="iconfont icon-addNew" /> 新增
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-edit"
        >修改
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-delete"
        >删除
        </el-button>
      </div>
    </div>
    <div class="flex">
      <div class="flex">
        <el-input
          v-model="search"
          placeholder="请输入内容"
          style="width: 200px;margin-right: 20px"
          suffix-icon="el-icon-search"
        />
      </div>
      <div class="flex">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <AzureDynamicTable
      :data="tableData"
      :column-des-objs="columnObjs"
      :show-seq="true"
      @selection-change="select"
    >
      <template slot="selection">
        <el-table-column
          align="center"
          fixed="left"
          type="selection"
          width="55"
        />
      </template>
    </AzureDynamicTable>
  </div>
</template>

<script>
import AzureDynamicTable from '@/components/mDynamicTable/AzureDynamicTable'

export default {
  name: 'Scheduleplan',
  components: { AzureDynamicTable },
  data() {
    return {
      search: '',
      value: '',
      options: [],
      tableData: [],
      columnObjs: [
        { key: 'OrderAutoPlanId', label: '排程控制器', width: 120 },
        { key: 'LineId', label: '产线', width: 120 },
        { key: 'Name', label: '名称', width: 120 },
        { key: 'StartTime', label: '计划开始时间', width: 120 },
        { key: 'EndTime', label: '计划停止时间', width: 120 },
        { key: 'TargetNum', label: '目标数', width: 120 },
        { key: 'IsActivate', label: '是否激活', width: 120 },
        { key: 'Priority', label: 'Priority', width: 120 },
        { key: 'ProductionPlanConditionPhotoId', label: 'ProductionPlanConditionPhotoId', width: 250 },
        { key: 'IsManual', label: 'IsManual', width: 120 },
        { key: 'LastModifyBy', label: 'LastModifyBy', width: 120 },
        { key: 'LastModifyTime', label: 'LastModifyTime', width: 160 },
        { key: 'Remark', label: 'Remark', width: 120 },
        { key: 'MakeupTypeautoOrManual', label: 'MakeupTypeautoOrManual', width: 250 },
        { key: 'Status', label: '状态', width: 120 },
        { key: 'FileExtension', label: '文件拓展', width: 120 },
        { key: 'CreateBy', label: '创建人', width: 160 },
        { key: 'CreateTime', label: '修改时间', width: 160 }
      ]
    }
  },
  created() {
  },
  methods: {
    select() {

    }
  }
}
</script>

<style scoped lang="scss">
  .sizeBig {
    font-size: 16px;
  }

  .topBtn {
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;

    .icon-biang {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-bottom: 2px;
      background: url("../../image/biangeng .png") no-repeat;
      vertical-align: middle;
    }

    .icon-setting {
      display: inline-block;
      width: 14px;
      height: 12px;
      margin-bottom: 2px;
      background: url("../../image/shezhi.png") no-repeat;
      vertical-align: middle;
    }

    .icon-close {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin: 0 3px 2px 0;
      background: url("../../image/jinyong.png") no-repeat;
      vertical-align: middle;
    }

    .icon-qiy {
      display: inline-block;
      width: 13px;
      height: 13px;
      margin: 0 3px 2px 0;
      background: url("../../image/qiyong.png") no-repeat;
      vertical-align: middle;
    }
  }

  .flex {
    display: flex;
  }

  .tablesize {
    /*width: 98%;*/
    // height: 485px;
    margin: 20px auto;

    #out-table {
      border: 1px solid #eeeeee;
    }
  }

  .block {
    text-align: right;
    margin: 28px 20px 0 0;
  }
</style>
